import React, { Component, PureComponent } from 'react';
import { AreaMap } from '@ant-design/charts';
import anhui from '@/pages/DataScreen/map/340000.json';

class AntVMap extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedName: '',
    };
  }

  selectedName = '';

  componentDidMount() {
    // console.log('装载成功');
  }

  render() {
    const mapConfig = {
      map: {
        type: 'mapbox',
        style: 'blank',
        //center: [120.19382669582967, 30.258134],
        zoom: 2,
        pitch: 0,
        zoomEnable: false,
        doubleClickZoom: false,
        dragPan: false,
        // boxZoom:false,
        dragRotate: false,
        scrollZoom: false,
      },
      source: {
        data: anhui,
        parser: {
          type: 'geojson',
        },
      },
      autoFit: true,
      // color:'#94CEFE',
      style: {
        opacity: 1,
        stroke: 'rgb(93,112,146)',
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      state: {
        active: {
          stroke: '#3066ba',
          lineWidth: 1,
          lineOpacity: 0.8,
        },
        select: {
          stroke: '#3066ba',
          fill: '#3066ba',
          // lineWidth: 1.5,
          lineOpacity: 0.8,
        },
      },
      enabledMultiSelect:true,
      label: {
        visible: true,
        field: 'name',
        style: {
          fill: '#000',
          opacity: 0.8,
          fontSize: 10,
          stroke: '#fff',
          strokeWidth: 1.5,
          textAllowOverlap: false,
          padding: [5, 5],
        },
      },
      tooltip: {
        trigger: 'mousemove',
        customContent: (title, items) => {
          if (items.length > 0) {
            const { name, value } = items[0];
            return `
          <div  style="background-color: white;padding: 8px 16px;border: 1px solid #666666">${value}</div>
          `;
          } else {
            return '<div></div>';
          }
        },
        items: ['name'],
      },
    };
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <AreaMap onReady={this.handleOnReady} {...mapConfig} />
      </div>
    );
  }

  handleOnReady = plot => {
    if (plot) {
      plot.on('areaLayer:click', this.handleMapChange);
    }
  };

  handleMapChange = evt => {
    const {
      feature: {
        properties: { name },
      },
    } = evt;
    console.log(evt);
    if (this.selectedName != name) {
      this.selectedName = name;
    } else {
      this.selectedName = '';
    }
    const {onSelectChange} = this.props;
    console.log("onSelectChange",onSelectChange);
    if (onSelectChange){
      onSelectChange(this.selectedName);
    }
  };
}

export default AntVMap;
